<template>
	<view class="grid">
		<view  class="grid_item goods" v-for="(item, index) in gridDatas" @click.stop="goToGoodsDetailPage(item)">
			<view class="good-image">
				<sl-image :value="item.image"></sl-image>
			</view>
			<view class="goods-name">
				<Tag class="tag-name" :tagName="item.tags"></Tag>
				<view class="goods-name-item">{{item.name }}</view>
			</view>
			<view class="goods-bottom">
				<Money :priceValue="item.price" :activeClass="['money-price']"></Money>
				<view class="flex flex-x-center flex-y-center goods-bottom-click">
					<image class="custom-icon icon-fire" src="../../../static/svg/icon-fire.svg"></image>
					<Sales :countSales="item.sales || 0"></Sales>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Constants from '@/constants';
	import Money from '@/pages/components/money/money.vue';
	import Sales from '@/pages/components/count/sales.vue';
	import Tag from '@/pages/components/tag/tag.vue';
	//商品组件
	//@group 业务组件
	export default {
		//
		name: 'goods',
		//
		mixins: [Constants],
		//
		components: {
			Money,
			Sales,
			Tag
		},
		//
		data() {
			return {};
		},
		//
		props: {
			//点击商品跳转页面
			targetPage: {
				type: String,
				default: ''
			},
			//商品集合
			gridDatas: {
				type: Array,
				default () {
					return [];
				}
			}
		},
		//
		methods: {
			//跳转到商品详情页面
			goToGoodsDetailPage({
				id,
				tags
			} = {}) {
				const toTargetPage = this.targetPage || this.pages.goodsDetailPage;
				if (id ?? null) {
					this.$app.navTo(toTargetPage, {
						goodsId: id,
						tags

					});
				} else {
					this.$app.toast(`参数出错：${id}`);
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	.grid {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1rem;
		place-items: center;
	
		.grid_item {
			width: 100%;
		}
	}
	
	.goods {
		background: #fff;
		border-radius: 22rpx;
		overflow: hidden;
		padding-bottom: 16rpx;

		.good-image {
			position: relative;
			padding-bottom: 100%;
			overflow: hidden;
		}

		.goods-name {
			display: flex;
			padding: 24rpx;
			font-size: 28rpx;
			color: #3a3a3a;
			font-weight: 400;
			width: 325rpx;
			height: 100rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: break-spaces;
			.tag-name{
				position: absolute;
			}
			.goods-name-item{
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				text-overflow: ellipsis;
				white-space: break-spaces;
				word-break: break-all;
				text-indent: 2.3em;
			}
		}

		.goods-bottom {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 6rpx 24rpx;
			.icon-fire{
				height: 28rpx;
				width: 28rpx;
			}
			.goods-bottom-click {
				background: rgba(0, 0, 0, 0.05);
				border-radius: 40rpx;
				padding: 0rpx 16rpx;
			}
		}
	}
</style>